import React, { useState } from 'react';
import ReactDom from 'react-dom';
import { useEffect, useRef } from 'react/cjs/react.development';
const App = () => {
  // 准备组件的显示与隐藏
  const [isShow, setIsShow] = useState(true);
  return (
    <div>
      {isShow && <Child></Child>}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  );
};

function Child() {
  const timeRef = useRef();
  console.log(timeRef);
  useEffect(() => {
    timeRef.current = setInterval(() => {
      console.log(5);
    }, 1000);
    return () => {
      clearInterval(timeRef.current);
      console.log(timeRef);
    };
  }, []);
  return <div>我是子组件</div>;
}
ReactDom.render(<App />, document.getElementById('root'));
